<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜品管理</title>

    <link rel="stylesheet" href="../css/dish.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="dish" style="height: 100%">
    <header>
        <h2 style="line-height: 60px; margin-left: 50px;">菜品管理</h2>
    </header>
    <main>
        <div class="main-center">
            <div class="submit">
                <el-input
                        style="width: 300px;margin: 10px"
                        placeholder="请输入菜品名称"
                        prefix-icon="el-icon-search"
                        v-model.trim="name"
                        clearable
                        @clear="clear"
                        @change="selectDish">
                </el-input>
                <el-row style="float: right;width: 450px;display: flex;justify-content: space-around;align-items: center;margin: 10px">
                    <el-link type="danger" @click="deleteDishes">批量删除</el-link>
                    <span style="opacity: 0.3;">|</span>
                    <el-link type="primary" @click="bachStopOrStar(1)" >批量启售</el-link>
                    <span style="opacity: 0.3;">|</span>
                    <el-link type="danger" @click="bachStopOrStar(0)">批量禁售</el-link>
                    <span style="opacity: 0.3;">|</span>
                    <el-button :loading="loading" type="warning" @click="dialogVisible = true">+新增菜品</el-button>
                </el-row>
            </div>
            <div class="main-table" style="width: 95%; margin: 0 auto">
                <template>
                    <el-table
                            ref="multipleTable"
                            :data="tableData"
                            tooltip-effect="dark"
                            size="mini"
                            style="width: 100%"
                            @selection-change="handleSelectionChange">
                        <el-table-column
                                type="selection"
                                width="55"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="name"
                                label="菜品名称">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="img"
                                label="图片"
                                width="120">
                            <template slot-scope="scope" align="center">
                                <div class="demo-image__placeholder">
                                    <div class="block">
                                        <el-image :src="`/background/load/download?name=${scope.row.img}`" :fit="'scale-down'" style="height: 35px">
                                            <div slot="placeholder" class="image-slot">
                                                加载中<span class="dot">...</span>
                                            </div>
                                        </el-image>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="typesName"
                                label="菜品分类"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="price"
                                label="售价"
                                width="100px"
                                show-overflow-tooltip>
                            <template slot-scope="scope">{{ "￥" + scope.row.price }}</template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="state"
                                label="售卖状态"
                                show-overflow-tooltip>
                            <template slot-scope="scope">{{scope.row.status}}</template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="updateTime"
                                label="最后操作时间"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button
                                        type="text"

                                        @click="handleEdit(scope.$index, scope.row)">修改
                                </el-button>
                                <span style="opacity: 0.3;">|</span>
                                <el-button
                                        type="text"
                                        :plain="false"
                                        @click="handleStop(scope.$index, scope.row)">{{scope.row.status == '起售'?"禁售":"起售"}}
                                </el-button>
                                <span style="opacity: 0.3;">|</span>
                                <el-button
                                        style="color: red"
                                        type="text"
                                        @click="handleDelete(scope.$index, scope.row)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </div>

        </div>

        <div class="page-info">
            <template>
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageTool.pageNo"
                            :page-sizes="[5, 10]"
                            :page-size="5"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageTool.pageTotal">
                    </el-pagination>
                </div>
            </template>
        </div>
        <!--        新增弹窗-->
        <el-dialog
                title="新增菜品"
                :visible.sync="dialogVisible"
                width="30%"

                :before-close="handleClose">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="菜品名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="图片上传">
                    <el-upload
                            :limit="1"
                            :file-list="fileList"
                            action="/background/load/upload"
                            class="upload-demo"
                            name="file"
                            :on-success="upload"
                            list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="菜品分类">
                    <template>
                        <el-select v-model="form.typesId" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.order"
                                    :label="item.typesName"
                                    :value="item.order">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <el-form-item label="售价">
                    <el-input v-model="form.price"></el-input>
                </el-form-item>
                <el-form-item label="售卖状态">
                    <el-select v-model="form.status" placeholder="请选择售卖状态">
                        <el-option label="起售" value="起售"></el-option>
                        <el-option label="停售" value="停售"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onsubmit">提 交</el-button>
            </span>
        </el-dialog>
<!--        修改弹窗-->
        <el-dialog
                title="修改菜品"
                :visible.sync="dialogVisibleUpdate"
                width="30%"

                :before-close="handleClose">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="菜品名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="菜品分类">
                    <template>
                        <el-select v-model="form.typesId" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.order"
                                    :label="item.typesName"
                                    :value="item.order">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <el-form-item label="售价">
                    <el-input v-model="form.price"></el-input>
                </el-form-item>
                <el-form-item label="售卖状态">
                    <el-select v-model="form.status" placeholder="请选择售卖状态">
                        <el-option label="起售" value="1">起售</el-option>
                        <el-option label="停售" value="0">停售</el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateDish">提 交</el-button>
            </span>
        </el-dialog>
    </main>
</div>
</body>

<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var dish = new Vue({
        el: "#dish",
        data: {
            name: "",
            fileList:[],
            message:"",
            form: {
                name:"",
                img:null,
                typesName:"",
                price:"",
                status:null,
            },
            loading: false,
            tableData: [
            ],
            //多选框数据
            multipleSelection: [],
            //d打开form表单
            dialogVisible: false,
            dialogVisibleUpdate:false,
            //设置菜品分类名称
            options:[],
            value:null,
            //页数相关
            pageTool: {
                pageTotal:null,
                pageSize: 5,
                pageNo: 1
            },
            messageStyle:{
                message:'',
                offset:80,
            },
        },
        methods: {





            handleSelectionChange(val) {
                let idArr = [];

                val.forEach((n) =>{
                    idArr.push(n.id);
                })
                this.multipleSelection = idArr;
                // console.log(this.multipleSelection)
            },
            //批量起售
            //批量停售
            bachStopOrStar(status){
                if (this.multipleSelection.length == 0){
                    this.$message.warning({
                        message:"请选择对象后再试！！！",
                        offset:80
                    })
                }else {
                    axios.put(`/background/dish/${status}/${this.multipleSelection}`).then(res=>{
                        // console.log(res.data);
                        this.messageStyle.message = res.data.message;
                        if (res.data.code == 20031){
                            this.$message.success(this.messageStyle);
                        }else {
                            this.$message.error(this.messageStyle);
                        }
                        this.multipleSelection = [];
                        this.selectDish();
                    }).catch(err=>{
                        console.log(err);
                    });
                }
            },
            //row具体内容
            //停售
            handleStop(index, row) {
                that = this;
                let status = 1;
                if (row.status == '起售'){
                    status = 0;
                }
                this.multipleSelection.push(row.id);
                // console.log(this.multipleSelection);
                // console.log(index, row);
                axios.put(`/background/dish/${status}/${this.multipleSelection}`).then(res=>{
                    // console.log(res.data);
                    this.messageStyle.message = res.data.message;
                    if (res.data.code == 20031){
                        this.$message.success(this.messageStyle);

                    }else {
                        this.$message.error(this.messageStyle);
                    }
                    this.multipleSelection=[];
                    this.selectDish();
                }).catch(err=>{
                    console.log(err);
                });
            },
            //修改
            handleEdit(index, row) {
                // console.log(index, row);
                this.form = Object.assign({},row);
                this.dialogVisibleUpdate = true;
            },
            //批量删除
            deleteDishes(){
                that = this;
                axios.delete(`/background/dish/${this.multipleSelection}`).then(res=>{
                    this.messageStyle.message = res.data.message;
                    if (res.data.code == 20021){
                        this.$message.success(this.messageStyle);

                    }else {
                        this.$message.warning(this.messageStyle);
                    }
                    that.multipleSelection=[];
                    this.selectDish();
                }).catch(err=>{
                    this.$message.error("500 系统出错！！！")
                    // console.log(err);
                })
            },

            handleDelete(index, row) {
                this.multipleSelection.push(row.id);
                // console.log(index, row);

                axios.delete(`/background/dish/${this.multipleSelection}`).then(res=>{
                    this.messageStyle.message = res.data.message;
                    if (res.data.code == 20021){
                        this.$message.success(this.messageStyle);
                        this.multipleSelection = [];
                        this.selectDish();
                    }else {
                        this.multipleSelection = [];
                        this.$message.error(this.messageStyle);
                    }
                }).catch(err=>{
                    this.$message.error("出错了，请稍后再试！！");
                    // console.log(err);
                })
            },
            //修改页面显示多少条数 val为数值
            handleSizeChange(val) {
                // console.log(val)
                this.pageTool.pageSize = val;
                this.selectDish();
            },

            //页码发生变化
            handleCurrentChange(val) {
                // console.log(val)
                this.pageTool.pageNo = val;
                this.selectDish();
            },

            //关闭提示框
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            //提交表单
            onsubmit(){
                that = this;

                axios.post("/background/dish/",this.form).then(res=>{
                    // console.log(res.data)
                    this.messageStyle.message =res.data.message;
                    that.dialogVisible = false;
                    if (res.data.code == 20011){
                        this.$message.success(this.messageStyle)
                    }else {
                        this.$message.warning(this.messageStyle)
                    }
                    that.form={};
                    this.fileList=[];
                    that.selectDish();
                }).catch(err=>{
                    this.$message.error("出错了，请稍后再试！！");
                    console.log(err);
                })
            },
            upload(response, file, fileList){
                console.log(response.data);
                this.form.img = response.data;

            },


            //获取全部数据
            selectDish(){
                that = this;
                if (this.name != ""){
                    this.pageTool.pageNo = 1;
                }
                axios.get("/background/dish", {
                    params:{
                        pageNo:this.pageTool.pageNo,
                        pageSize:this.pageTool.pageSize,
                        name:this.name,
                    }
                })
                    .then(res=>{
                        if (res.data.code == 20041){
                            that.tableData = res.data.data.records;
                            that.pageTool.pageTotal = res.data.data.total
                        }
                })
                    .catch(err=>{
                    this.$message.error("出错了，请稍后再试！！");
                    console.log(err)
                })
            },
            updateDish(){
                axios.put("/background/dish/update",this.form).then(res=>{
                    this.messageStyle.message = res.data.message;
                    if (res.data.code == 20031){
                        this.$message.success(this.messageStyle);
                    }else {
                        this.$message.error(this.messageStyle);
                    }
                    this.dialogVisibleUpdate = false;
                    this.form={};
                    this.selectDish();

                }).catch(err=>{
                    this.$message.error("出错了，请稍后再试！！");
                    console.log(err);
                })
            },
            clear(){
              this.selectDish();
            },
            getTypesName(){
              axios.get(`/background/classInfo/typesName?types=${"菜品分类"}`)
                  .then(res =>{
                      this.options = res.data.data;
                  })
                  .catch(err =>{
                      this.$message.error("获取菜品分类信息错误！！！");
                  })
            },

        },
        mounted(){
            this.getTypesName();
            this.selectDish();
        }
    })
</script>
</html>